<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                模板引擎
            </title>
            <script src="./template.js" type="text/javascript">
            </script>
            <script id="books" type="text/html">
                <h1>{{title}}</h1>
                {{each books as value}}
                <div>{{value}}</div>
                {{/each}}
            </script>
        </meta>
    </head>
    <body>
        <div id="container">
        </div>
        <script type="text/javascript">
            window.onload = function(){
        // function success(data){
        //     // 这里就相当于之前的回调函数
        //     var title = data.title;
        //     var books = data.books;
        //     var tag = '<h1>'+title+'</h1>';
        //     for(var i=0;i<books.length;i++){
        //         tag += '<div>'+books[i]+'</div>';
        //     }
        //     var con = document.getElementById('container');
        //     con.innerHTML = tag;
        // }
        
        // var data = {
        //     title : '图书信息',
        //     books:['三国演义','水浒传','西游记','红楼梦']
        // }
        // success(data);
        
        var data = {
            title : '图书信息',
            books:['三国演义','水浒传','西游记','红楼梦']
        }
        var tag = template('books',data);
        var html = document.querySelector("body");
        html.innerHTML+=tag;


    }
        </script>
    </body>
</html>